<div id="index" v-cloak>
    <div id="loadingBar" v-if="barPercent > 0">
        <el-progress
                :percentage="barPercent"
                :stroke-width="2"
                :show-text="false"
                :status="barStatus"
                stroke-linecap="round"></el-progress>
    </div>
    <p v-if="'${r'${prop.active}'}' == 'dev'" id="devMarker" marker-value="DEV"></p>

    <div id="aside" :style="{width:(prop.coll?'64px':'200px')}">
        <el-menu
                @open="handleOpen"
                @close="handleClose"
                @select="handleSelect"
                :default-active="prop.menu"
                :unique-opened="prop.open"
                :collapse="prop.coll"
                :collapse-transition="prop.tran"
                background-color="#252a2f"
                text-color="#d6d6d6"
                active-text-color="#ffd04b">
            ${print('<#if token.hasRes("DEV")>')}
            <el-submenu index="${uuid()}" >
                <template slot="title">
                    <i class="el-icon-help"></i>
                    <span slot="title">核心设置</span>
                </template>
                ${print('<#if token.hasRes("DEV_PROFILES")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '系统配置', name: 'profiles', url: '${r'${context}'}/wsys/profiles.htm'})">系统配置</el-menu-item>
                ${print('</#if>')}
                ${print('<#if token.hasRes("DEV_RES")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '资源管理', name: 'res', url: '${r'${context}'}/wsys/res.htm'})">资源管理</el-menu-item>
                ${print('</#if>')}
                ${print('<#if token.hasRes("DEV_ROLE")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '角色管理', name: 'role', url: '${r'${context}'}/wsys/role.htm'})">角色管理</el-menu-item>
                ${print('</#if>')}
                ${print('<#if token.hasRes("DEV_TASK_SQL")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: 'SQL任务', name: 'taskSql', url: '${r'${context}'}/wsys/taskSql.htm'})">SQL任务</el-menu-item>
                ${print('</#if>')}
                ${print('<#if token.hasRes("DEV_VISITOR")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '应用接入', name: 'visitor', url: '${r'${context}'}/wsys/visitor.htm'})">应用接入</el-menu-item>
                ${print('</#if>')}
            </el-submenu>
            ${print('</#if>')}
            ${print('<#if token.hasRes("MNT")>')}
            <el-submenu index="${uuid()}" >
                <template slot="title">
                    <i class="el-icon-stopwatch"></i>
                    <span slot="title">监控运行</span>
                </template>
                ${print('<#if token.hasRes("MNT_TOKENS")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '登录管理', name: 'tokens', url: '${r'${context}'}/wsys/tokens.htm'})">登录管理</el-menu-item>
                ${print('</#if>')}
                ${print('<#if token.hasRes("MNT_SCHEDULE")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '调度监控', name: 'schedule', url: '${r'${context}'}/wsys/schedule.htm'})">调度监控</el-menu-item>
                ${print('</#if>')}
                ${print('<#if token.hasRes("MNT_LOGTASK")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '调度日志', name: 'logtask', url: '${r'${context}'}/wsys/logtask.htm'})">调度日志</el-menu-item>
                ${print('</#if>')}
                ${print('<#if token.hasRes("MNT_LOGERR")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '故障日志', name: 'logerr', url: '${r'${context}'}/wsys/logerr.htm'})">故障日志</el-menu-item>
                ${print('</#if>')}
            </el-submenu>
            ${print('</#if>')}
            ${print('<#if token.hasRes("SYS")>')}
            <el-submenu index="${uuid()}" >
                <template slot="title">
                    <i class="el-icon-setting"></i>
                    <span slot="title">基础设置</span>
                </template>
                ${print('<#if token.hasRes("SYS_DICT")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '字典管理', name: 'dict', url: '${r'${context}'}/wsys/dict.htm'})">字典管理</el-menu-item>
                ${print('</#if>')}
                ${print('<#if token.hasRes("SYS_USER")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '用户管理', name: 'user', url: '${r'${context}'}/wsys/user.htm'})">用户管理</el-menu-item>
                ${print('</#if>')}
                ${print('<#if token.hasRes("SYS_DEPT")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '部门管理', name: 'dept', url: '${r'${context}'}/wsys/dept.htm'})">部门管理</el-menu-item>
                ${print('</#if>')}
                ${print('<#if token.hasRes("SYS_FILE")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '文件管理', name: 'file', url: '${r'${context}'}/wsys/file.htm'})">文件管理</el-menu-item>
                ${print('</#if>')}
            </el-submenu>
            ${print('</#if>')}
<#list project.modules as module>
<#if module.hasHtml() && module.needGenerate>
            ${print('<#if token.hasRes("${module.name?upper_case}")>')}
            <el-submenu index="${uuid()}">
                <template slot="title">
                    <i class="el-icon-document-copy"></i>
                    <span slot="title">${module.note}</span>
                </template>
                <#list module.tables as table>
                <#if table.isPage()>
                ${print('<#if token.hasRes("${module.name?upper_case}_${table.tableName?upper_case}")>')}
                <el-menu-item index="${uuid()}" @click="addTab({title: '${table.tableComment}', name: '${table.tableName}', url: '${r"${context}"}/${module.name}/${table.getFName()}.htm'})">${table.tableComment}</el-menu-item>
                ${print('</#if>')}
                </#if>
                </#list>
            </el-submenu>
            ${print('</#if>')}
</#if>
</#list>
        </el-menu>
    </div>

    <div id="main" :style="{marginLeft:(prop.coll?'64px':'200px')}">
        <div id="head">
            <div class="collapseSwitch" @click="collapseSwitch">
                <a :class="prop.coll?'reversal':''"><i class="el-icon-s-fold"></i></a>
            </div>

            <el-link :underline="false" @click="onHome" icon="el-icon-s-home">首页</el-link>

            <div class="menu">
                <ul>
                    <li>
                        <wb-dropdown>
                            <el-link :underline="false" @click="onHome" icon="el-icon-user">${r'${token.userAlias}'}</el-link>

                            <wb-dropdown-menu slot="dropdown">
                                <wb-dropdown-item>个人信息</wb-dropdown-item>
                                <wb-dropdown-item @click="onChangePwd">修改密码</wb-dropdown-item>
                                <wb-dropdown-item @click="onLogout">退出登录</wb-dropdown-item>
                            </wb-dropdown-menu>
                        </wb-dropdown>
                    </li>
                    <li>
                        <el-link :underline="false" @click="onHome" icon="el-icon-message"><span
                                style="line-height: 20px;"><el-badge is-dot class="item">消息</el-badge></span></el-link>
                    </li>
                    <li>
                        <wb-dropdown>
                            <el-link :underline="false" @click="onHome" icon="el-icon-warning-outline">关于</el-link>

                            <wb-dropdown-menu slot="dropdown">
                                <wb-dropdown-item @click="addTab({title: '开发指导', name: 'helpDev', url: '${r'${context}'}/helpDev.htm'})">开发指导</wb-dropdown-item>
                                <wb-dropdown-item @click="addTab({title: '使用指导', name: 'help', url: '${r'${context}'}/help.htm'})">使用指导</wb-dropdown-item>
                            </wb-dropdown-menu>
                        </wb-dropdown>
                    </li>
                    <li>
                        <el-link :underline="false" icon="el-icon-full-screen" @click="switchFullScreen">全屏</el-link>
                    </li>
                    <li>
                        <el-link :underline="false" icon="el-icon-switch-button" @click="onLogout"></el-link>
                    </li>
                </ul>
            </div>
        </div>
        <div id="content">
            <el-tabs v-model="prop.tabName" type="border-card" closable @tab-remove="removeTab">
                <el-tab-pane
                        v-for="(item, index) in tabs"
                        :lazy="true"
                        :key="item.name"
                        :label="item.title"
                        :name="item.name">
                    <iframe :src="item.url" style="width: 100%;height: 100%;border: 0;"></iframe>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <el-dialog
            title="密码修改"
            width="350px"
            :visible.sync="form.formShow">
        <el-form class="form" :model="form" :rules="formRules" ref="form" label-position="right" label-width="90px">
            <el-form-item label="当前密码" prop="password">
                <el-input v-model="form.password" type="password" clearable size="mini" placeholder="请输入当前密码"></el-input>
            </el-form-item>
            <el-form-item label="新设密码" prop="newPassword">
                <el-input v-model="form.newPassword" type="password"  clearable size="mini" placeholder="请输入新设密码"></el-input>
            </el-form-item>
            <el-form-item label="密码确认" prop="newPassword_">
                <el-input v-model="form.newPassword_" type="password"  clearable size="mini" placeholder="请输入密码确认"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="form.formShow = false">取 消</el-button>
			<el-button size="mini" type="primary" @click="onSubmit">保存</el-button>
		</span>
    </el-dialog>
</div>
<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html, body, #index {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    a:active, a:hover {
        opacity: 0.7;
        outline: 0;
        text-decoration: none
        cursor: pointer;
    }

    #loadingBar {
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        right: 0;
    }

    #loadingBar div[role=progressbar] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
    }

    #loadingBar div[role=progressbar] .el-progress-bar__outer{
        background-color: transparent;
    }

    #devMarker{
        position: absolute;
        bottom: 50px;
        right: 50px;
    }

    #devMarker:after{
        pointer-events:none;
        content: attr(marker-value);
        font-size: 100px;
        color: rgba(188, 188, 188, 0.5);
        z-index: 9999;
        display: block;
        position: relative;
        text-align: center;
        line-height: 100%;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #aside {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transition: all .5s;
        background: #252a2f;
    }

    #aside ul[role=menubar] {
        border-right: solid 0 #e6e6e6;
    }

    .el-submenu__title{
        height: 40px!important;
        line-height: 40px!important;
    }
    .el-menu-item {
        height: 40px!important;
        line-height: 40px!important;
    }
    .el-menu--popup-right-start{
        padding: 0px;
    }

    #main {
        height: 100%;
        margin-left: 200px;
        transition: all .5s;
    }

    #head {
        width: 100%;
        height: 40px;
        line-height: 40px;
        overflow: hidden;
        background: #252a2f;
    }

    #head .collapseSwitch {
        display: inline-block;
        height: 40px;
        width: 40px;
        text-align: center;
        font-size: 24px;
        border-left: 1px solid #424242;
        border-right: 1px solid #424242;
    }

    #head .collapseSwitch a {
        display: inline-block;
        transition: all .5s;
    }

    #head .collapseSwitch a.reversal {
        transform: rotate(-180deg);
    }

    #head a {
        color: #d6d6d6;
        vertical-align: top;
    }

    #head a:hover {
        color: #409EFF;
        opacity: 1;
    }

    #head .collapseSwitch:hover {
        background: #3b4146;
    }

    #head .menu {
        display: inline-block;
        float: right;
    }

    #head .menu ul {
        display: inline-block;
    }

    #head .menu ul li {
        display: inline-block;
        vertical-align: top;
    }

    #head .menu ul li a {
        display: inline-block;
        text-align: center;
        position: relative;
        margin: 0 10px;
        height: 40px;
        vertical-align: top;
    }

    #head .menu ul li a:after {
        content: "";
        display: inline-block;
        background: #409EFF;
        width: 0;
        height: 2px;
        position: absolute;
        bottom: 2px;
        left: 50%;
        transition: all 0.3s;
    }

    #head .menu ul li a:hover:after {
        width: 100%;
        left: 0;
    }

    #content,#content .el-tabs__content  {
        padding: 0;
        height: calc(100% - 40px);
    }

    #content > div,#content .el-tab-pane  {
        padding: 0;
        height: 100%;
    }

    #content div[role=tab]{
        padding: 0 10px;
    }
</style>
<script>
    window.index = new Vue({
        el: "#index",
        data: {
            tabs: [],//所有Tabs
            barStatus:null,
            barPercent: 0,
            barInterval: null,
            prop: {
                menu: '',
                tabName: '',
                open: ${r"<#if prop.open>true<#else>false</#if>"},
                coll: ${r"<#if prop.coll>true<#else>false</#if>"},
                tran: ${r"<#if prop.tran>true<#else>false</#if>"},
                full: ${r"<#if prop.full>true<#else>false</#if>"}
            },
            form:{
                formShow:false,
                password:'',
                newPassword:'',
                newPassword_:''
            },
            formRules: {
                password: [
                    {required: true, message: '请输入当前登录密码', trigger: 'blur'},
                ],
                newPassword: [
                    {required: true, message: '请输入新登录密码', trigger: 'blur'},
                    {min: 6, max: 20, message: '新登录密码长度需在 6 到 20 个字符', trigger: 'blur'}
                ],
                newPassword_: [
                    {required: true, message: '密码确认不能为空', trigger: 'blur'},
                    { validator: function (rule, value, callback) {
                        if (value === '') {
                            callback(new Error('请再次输入密码'));
                        } else if (value !== index.form.newPassword) {
                            callback(new Error('两次输入密码不一致!'));
                        } else {
                            callback();
                        }
                    }, trigger: 'blur' }
                ]
            }
        },
        methods: {
            onHome: function () {
                this.addTab({
                    title: '首页',
                    name: 'home',
                    url: '${r"${context}"}/home.htm'
                })
            },
            barStart: function () {
                clearInterval(this.barInterval);
                this.barPercent = 10;
                this.barInterval = setInterval(function () {
                    this.barPercent = this.barPercent + (90 - this.barPercent) * 0.01;
                }.bind(this), 100)
            },
            barFinish: function () {
                clearInterval(this.barInterval);
                this.barPercent = 100;
                setTimeout(function () {
                    this.barPercent = 0;
                }.bind(this), 1000);
            },
            barError: function () {
                clearInterval(this.barInterval);
                this.barPercent = 100;
                this.barStatus = 'exception'
                setTimeout(function () {
                    this.barPercent = 0;
                    this.barStatus = null;
                }.bind(this), 1000);
            },
            collapseSwitch: function () {
                this.prop.coll = !this.prop.coll;
                this.onSaveState();
            },
            handleOpen: function () {

            },
            handleClose: function () {

            },
            handleSelect: function (index) {
                this.prop.menu = index;
            },
            addTab: function (tab) {
                //查找是否存在该tab
                var tempTabs = this.tabs.filter(function (tab_) {
                    return tab_.name === tab.name;
                })
                //不存在则添加
                if (tempTabs.length <= 0) {
                    this.tabs.push(tab)
                }
                this.prop.tabName = tab.name;
                this.onSaveState();
            },
            removeTab: function (tabName) {
                var activeName = this.prop.tabName;
                var tempTabs = this.tabs;
                if (activeName === tabName) {
                    tempTabs.forEach(function (tab, index) {
                        if (tab.name === tabName) {
                            var nextTab = tempTabs[index + 1] || tempTabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.prop.tabName = activeName;
                this.tabs = tempTabs.filter(function (tab) {
                    return tab.name !== tabName
                })
            },
            onSubmit:function () {
                this.$refs['form'].validate(function (valid) {
                    if (valid) {
                        new Ajax("wsys", "User", "changePwd").post(this.form, function (response) {
                            if (response.errors.length > 0) {
                                nav.e(response.errors[0].message);
                            } else {
                                this.onLogoutForChangePwd();
                            }
                        }.bind(this));
                    }
                }.bind(this))
            },
            onLogout: function() {
                nav.boxYesNo("退出提示", "是否退出当前登录账户?" ,function (result) {
                    if (result){
                        new Ajax("wsys", "User").method("logout").post({}, function (response) {
                            if (response.errors.length > 0) {
                                nav.e(response.errors[0].message);
                            } else {
                                nav.clearCookie("token");
                                nav.toOpen("/login.htm");
                            }
                        }.bind(this));
                    }
                }.bind(this))
            },
            onChangePwd: function () {
                this.form.formShow = true;
            },
            onLogoutForChangePwd: function () {
                nav.boxYes("退出提示", "密码修改成功立即重新登录?" ,function (result) {
                    new Ajax("wsys", "User").method("logout").post({}, function (response) {
                        if (response.errors.length > 0) {
                            nav.e(response.errors[0].message);
                        } else {
                            nav.clearCookie("token");
                            nav.toOpen("/login.htm");
                        }
                    }.bind(this));
                }.bind(this))
            },
            switchFullScreen:function(){
                this.prop.full = !this.prop.full;
                if (this.prop.full) {
                    nav.screenFull()
                } else {
                    nav.screenNotFull()
                }
                this.onSaveState();
            },
            onSaveState: function () {
                nav.setCookie("prop.menu", this.prop.menu);
                nav.setCookie("prop.open", this.prop.open);
                nav.setCookie("prop.coll", this.prop.coll);
                nav.setCookie("prop.tran", this.prop.tran);
                nav.setCookie("prop.full", this.prop.full);
                var tab = this.tabs.filter(function (tab_) {
                    return tab_.name == this.prop.tabName;
                }.bind(this))[0];
                nav.setCookie("tab.title", tab.title);
                nav.setCookie("tab.name", tab.name);
                nav.setCookie("tab.url", tab.url);
            }
        },
        created: function () {
        },
        mounted: function () {
            this.prop.menu = nav.getCookie("prop.menu");
            this.prop.open = nav.getCookie("prop.open").length>0?JSON.parse(nav.getCookie("prop.open")):this.prop.open;
            this.prop.coll = nav.getCookie("prop.coll").length>0?JSON.parse(nav.getCookie("prop.coll")):this.prop.coll;
            this.prop.tran = nav.getCookie("prop.tran").length>0?JSON.parse(nav.getCookie("prop.tran")):this.prop.tran;
            this.prop.full = nav.getCookie("prop.full").length>0?JSON.parse(nav.getCookie("prop.full")):this.prop.full;
            if (this.prop.full) {
                nav.screenFull();
            } else {
                nav.screenNotFull();
            }

            var tabTitle = nav.getCookie("tab.title");
            var tabName = nav.getCookie("tab.name");
            var tabUrl = nav.getCookie("tab.url");
            this.onHome();
            // 开发模式，默认打开指导页
            if ('${r'${prop.active}'}' == 'dev') {
                this.addTab({
                    title: '开发指导',
                    name: 'helpDev',
                    url: '${r'${context}'}/helpDev.htm'
                })
            }
            // 打开最后一次打开的页面
            if (tabTitle && tabName && tabUrl) {
                this.addTab({
                    title: tabTitle,
                    name: tabName,
                    url: tabUrl
                })
            }
        },
        watch: {
            "prop.tabName":function () {
                this.onSaveState();
            }
        }
    })
</script>